import '@/global.less'
import RouterEntry from '@/router'
import useLayoutConfig from '@/zustand/useLayoutConfig'
import { App, ConfigProvider, Watermark } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { Toaster } from 'react-hot-toast'

dayjs.locale('zh-cn')

export default function MainApp() {
  /** 👇 项目水印 👇 */
  const waterMark = useLayoutConfig((s) => s.waterMark)
  const themeConfig = useLayoutConfig((s) => s.themeConfig)

  return (
    // 通过 cssVar 配置来开启 CSS 变量模式, 这个配置会被继承，所以全局开启 CSS 变量模式，只需要在根节点的 ConfigProvider 中配置即可
    // React 18
    // theme={{ cssVar: true }}
    // React 17 or 16
    // theme={{ cssVar: { key: 'app' } }}

    // hash 是 Ant Design 5.0 以来的特性之一, 其功能是为每一份主题计算一个独特的 hash 值, 并将其用在组件的 class 上, 用于隔离主题样式
    // 启用 CSS 变量之后, 相同 antd 版本下的组件样式不会随着 token 变化而改变 —— 因为我们用 CSS 变量填充了样式中的动态部分
    // 所以应用中只存在一个版本的 antd, 可以关闭 hash 来进一步减小样式体积
    <ConfigProvider
      locale={zhCN}
      theme={{
        cssVar: true,
        hashed: false,
        token: themeConfig,
        components: { Layout: { headerHeight: 48 } },
      }}
    >
      <Toaster toastOptions={{ duration: 3000 }} />
      <App className="h-[100%]">
        {waterMark ? (
          <Watermark zIndex={999} content={waterMark} className="h-[100%]">
            <RouterEntry />
          </Watermark>
        ) : (
          <RouterEntry />
        )}
      </App>
    </ConfigProvider>
  )
}
